<template>
	<div class="todo-list">
		<div class="todo-item" v-for="item in list" :key="item.id">
			<div class=" item-check" :class="item.done?'item-check-completed':'item-check-not'"
				@click="checkDone(item)" />
			<div class=" item-label" :class="item.done?'item-label-completed':''">{{ item.name }}</div>
			<button class="item-del" @click="delTodo(item.id)">X</button>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array
			}
		},
		data() {
			return {}
		},

		methods: {
			checkDone(item) {
				item.done = !item.done
			},

			delTodo(id) {
				this.$emit('delTodo', id) //emit前一定要加上$
			}
		}
	}
</script>

<style scoped>
	.todo-item {
		font-size: 16px;
		border-bottom: 1px solid #ededed;
		display: flex;
		align-items: center;
		height: 40px;
	}

	.item-check {
		width: 40px;
		height: 40px;
	}

	.item-check-completed {
		background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E");
	}

	.item-check-not {
		background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
	}

	.item-label {
		flex: 1;
		padding-left: 10px;
		font-size: 18px;
	}

	.item-label-completed {
		color: #949494;
		text-decoration: line-through;
	}

	.item-del {
		display: none;
		border: none;
		background-color: #fff;
		font-size: 20px;
		padding-right: 10px;
	}

	.item-del:hover,
	.item-del:focus {
		color: #c18585;
	}

	.todo-item:hover .item-del {
		display: block;
	}
</style>